<template>
    <div>
     
        <Tabs value="all" @on-click='shelves'>
            <TabPane label="全部订单" name="all"></TabPane>
            <TabPane label="未接单" name="order_0"></TabPane>
            <TabPane label="已接单" name="order_1"></TabPane>
            <TabPane label="已完成" name="order_2"></TabPane>
            <TabPane label="已关闭" name="order_4"></TabPane>
        </Tabs>

           <Row>
            <Col :md="12" :lg="24" :style="{marginBottom: '10px'}">
            <Card>
                <p slot="title" class="card-title">
                    <Icon type="android-checkbox-outline"></Icon>
                    筛选查询
                </p>
                用户账号：<Input style="width: 150px"  placeholder="用户ID/账号"></Input>
                用户昵称：<Input style="width: 150px"  placeholder="用户昵称"></Input>
                注册时间：<Input style="width: 150px"  placeholder="请选择时间" icon="ios-clock-outline"></Input>
                <Button type="primary">查询结果</Button>
            </Card>
            </Col>
        </Row>
        
        <div style="margin-top:10px;">

    	<table-temp   :columnsList="columnsList" v-model="UserList" >
            <div style="margin: 10px;overflow: hidden">
                <div style="float: right;">
                    <Page :total="total" :page-size='pagesize' :current="page" show-elevator show-total @on-change="changePage"></Page>
                </div>
            </div>
    	</table-temp>
        </div>

    </div>
</template>


<script>
    import TableTemp from "../common/layout/table-temp.vue"
    
    export default {
        components: {
            TableTemp,
        },
        data () {
            return {
                UserList: [],
                columnsList: [
                    {
                        title: 'id',
                        key: 'id',
                        align: 'center'
                        
                    },
                     {
                        title: '订单编号',
                        key: 'order_id',
                        align: 'center'

                    },
                    {
                        title: '提交时间',
                        key: 'stime',
                        align: 'center'
                    },
                    {
                        title: '账号',
                        key: 'uid',
                        align: 'center'
                    },   
                    {
                        title: '联系人',
                        key: 'username',
                        align: 'center'
                    },   
                    {
                        title: '手机号',
                        key: 'phone',
                        align: 'center'
                    },   
                    {
                        title: '订单类型',
                        key: 'payment',
                        align: 'center'
                    },  
                      {
                        title: '渠道',
                        key: 'payment',
                        align: 'center'
                    },  
                      {
                    title: '状态',
                    key: 'state',
                    align: 'center',
                    render: (h, params) => {
                    const row = params.row
                    const state = row.state === '0' ? '未接单' : row.state === '1' ? '已接单' :  row.state === '2' ? '已完成':row.state === '4' ? '已关闭':'未知'
                 

                    return h('Button', {
                        props: {
                            type: 'default',
                            size: 'small'
                            }
                        }, state);
                        }
                    },         
                    {
                        title: '操作',
                        align: 'center',
                        key: 'handle',
                        handle: ['edit','delete']
                    }
                ],
                modalShow:false,
                detailShow: false,
                page: 1,
                pagesize: 30,
                total: 0,  
                propsData: {},
                state: '',            
            }
        },

        created () {
            this.fetchData();
        },
        methods:{
            fetchData(){
                var _this = this;
                this.$axios.get(process.env.API_HOST+'/order/list',{ params: { page: this.page, pagesize: this.pagesize } }).then(function(response) {
                    if (response.data.code !== 0) {
                        _this.$Message.error(response.data.msg);
                        return false;
                    }else{
                        _this.UserList = response.data.data.list;
                        _this.total = parseInt(response.data.data.count);
                        
                    }
                    }).catch(function(err) {
                        console.log(err);
                    });
            },
            changePage (page) {
                this.page = page;            
                this.fetchData();
            },

            shelves (data) {
                if(data === 'all'){
                    this.state = '';                    
                }
                if(data === 'order_0'){
                    this.state = '0';                    
                }

                if(data === 'order_1'){
                    this.state = '1';                    
                }
                if(data === 'order_2'){
                    this.state = '2';                    
                }
                if(data === 'order_4'){
                    this.state = '4';                    
                }

                this.UserList = [];
                this.page = 1;
                this.fetchData();
            }
        
        
        },
    }
</script>
